<template>
  <el-dialog :close-on-click-modal="false" append-to-body title="不满足反馈" :visible.sync="visible" width="800px">
    <div class="add-form">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="原因类型" prop="reason" :rules="[{required: true, message: '请选择原因类型', trigger: 'blur'}]">
          <xm-select :options="unBigPandaTypeList" v-model="form.reason" placeholder="请选择" ref="reasonSelector" class="w-300"></xm-select>
        </el-form-item>
        <el-form-item label="备注信息" prop="remark" :rules="[
          {required: requiredRemrk, message: '请填写备注信息', trigger: 'blur'}
        ]">
          <el-input type="textarea" v-model="form.remark" placeholder="请填写备注信息"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="loading">{{ loading ? '提交中...' :
          '提交'
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { unBigPandaTypeList } from '@/const'
export default {
  data() {
    return {
      unBigPandaTypeList,
      visible: false,
      loading: false,
      form: {
        "reason": "",
        "remark": "",
      }
    }
  },
  methods: {
    show({type}) {
      this.visible = true
      this.type = type
    },
    hide() {
      this.visible = false
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('confirm', {type: this.type, passValue: this.getPassValue()})
        }
      })
    },
    getPassValue() {
      return `${this.form.reason}${this.form.remark ? `【备注：${this.form.remark}】` : ''}`
    },
  },
  computed: {
    requiredRemrk() {
      const item = unBigPandaTypeList.find(item => item.value === this.form.reason)
      const label = item && item.label
      return label && label.includes('备注')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
